<template>
  <view class="ver-layout">
    <!--  顶部布局  -->
    <view class="top-layout ver-layout">
      <view class="title">{{ breakDetail.realname }}</view>
      <view class="name">{{ breakDetail.org }}</view>
      <view class="state" :style="{color:getBreakStateText.color}">{{ getBreakStateText.text }}</view>
      <image class="break-state-icon" :src="getBreakStateImage"></image>
    </view>
    <!--  中间布局  -->
    <view class="center-layout ver-layout">
      <view>上课日期</view>
      <view class="time">{{ getBreakTime }}</view>
      <view class="center-content ver-layout">
        <view class="center-content-title">课时{{ breakDetail.duration }}小时</view>
        <view class="center-content-point hor-layout">
          <view class="point-layout ver-layout-center">
            <view class="point-view"></view>
            <view class="point-line"></view>
            <view class="point-view"></view>
          </view>
          <view class="point-times ver-layout">
            <view>{{ breakDetail.start_time }}</view>
            <view>{{ breakDetail.end_time }}</view>
          </view>
        </view>
      </view>
      <view class="break-reason-title">请假事由</view>
      <view class="break-reason">{{ breakDetail.content }}</view>
    </view>
    <!--  底部布局  -->
    <view v-if="breakDetail.status===1" class="bottom-layout hor-layout-side-center" @click="toSelectCourseTime">
      <view class="bottom-time-title">调课日期</view>
      <view class="hor-layout-center">
        <view class="bottom-time-text">{{ getSelectDate }}</view>
        <u-icon name="arrow-right" color="#B5B5B5"></u-icon>
      </view>
    </view>
    <!--  查看历史记录  -->
    <view class="look-history-layout hor-layout-side-center" @click="toBreakHistory">
      <view>查看TA的历史记录</view>
      <u-icon name="arrow-right" color="#B5B5B5"></u-icon>
    </view>
    <view style="height: 57px"></view>
    <!--  操作按钮  -->
    <view class="action-layout hor-layout" v-if="breakDetail.status===1">
      <view class="action-refuse" @click="toApprovalOpinion('refuse')">拒绝</view>
      <view class="action-agree" @click="agreeClick">同意</view>
    </view>
    <u-modal v-model="confirmObj.show" :content="confirmObj.content" :show-title="false" show-cancel-button
             @confirm="confirmAgree" @cancel="confirmObj.show=false"></u-modal>
  </view>
</template>

<script>
import {breakHistory, approvalOpinion, selectCourseTime, askBreak} from "@/router.js"
import {AskBreakApprovalApi} from "@/api/askBreak.js"

let engine = new AskBreakApprovalApi()
let refuse_icon = require("@/static/home/ic_ask_break_refuse.png"),
    agree_icon = require("@/static/home/ic_ask_break_agree.png")
export default {
  name: "breakDetail",
  data() {
    return {
      breakObj: {},
      refuse_icon,
      agree_icon,
      breakDetail: {},
      confirmObj: {
        show: false,
        content: '同意后流程将结束，确认同意吗？'
      },
      selDateObj: {}
    }
  },
  computed: {
    getBreakStateImage() {
      //请假审核状态：0驳回1待审2通过
      let {status} = this.breakDetail, stateImageMap = {0: refuse_icon, 1: '', 2: agree_icon}
      return stateImageMap[status]
    },
    getBreakStateText() {
      //请假审核状态：0驳回1待审2通过
      let {status} = this.breakDetail,
          stateTextMap = {
            0: {text: '审批被拒绝', color: '#5E6265'},
            1: {text: '等待我处理', color: '#CA9847'},
            2: {text: '审批通过', color: '#5E6265'},
            undefined: {text: '', color: ''}
          }
      return stateTextMap[status]
    },
    getBreakTime() {
      let {have_class_time} = this.breakDetail
      return have_class_time ? have_class_time : '--'
    },
    getSelectDate() {
      let {start_time, end_time, date} = this.selDateObj
      return date ? `${date} ${start_time}-${end_time}` : '请选择'
    }
  },
  onLoad(options) {
    this.breakObj = options
    this.getApprovalDetail()
  },
  methods: {
    getApprovalDetail() {
      let {id, leave_type} = this.breakObj
      engine.getApprovalDetail({leave_id: id, leave_type}).then(res => {
        this.breakDetail = res.data
      })
    },
    toBreakHistory() {
      let {user_id} = this.breakDetail
      this.$u.route({url: breakHistory, params: {...this.breakObj, user_id}})
    },
    toApprovalOpinion(type) {
      this.$u.route({url: approvalOpinion, params: this.breakObj})
    },
    agreeClick() {
      if (!this.selDateObj.date) {
        this.$u.toast("请选择调课日期!")
        return
      }
      this.confirmObj.show = true
    },
    confirmAgree() {
      let {start_time, end_time, date} = this.selDateObj
      let {leave_type, id} = this.breakObj, leave_id = id, class_date = date
      engine.agreeApproval({leave_type, leave_id, start_time, end_time, class_date}).then(res => {
        this.$u.toast(res.message)
        if (res.code === 200) {
          this.$u.pageCallBackDelay(askBreak, 'refreshData', '')
          this.$u.routeDelay({type: 'back'})
        }
      })
    },
    toSelectCourseTime() {
      this.$u.route({url: selectCourseTime, params: {...this.breakDetail}})
    },
    confirmSelectDate(dateObj) {
      console.log("confirmSelectDate", dateObj)
      this.selDateObj = dateObj
    }
  }
}
</script>

<style>
page {
  background: #F2F2F2;
}

.top-layout {
  position: relative;
  padding-top: 28px;
  padding-left: 24px;
  width: 100%;
  height: 112px;
  background: #FFFFFF;
}

.top-layout > .title {
  font-size: 19px;
  line-height: 19px;
  font-weight: bold;
  color: #333333;
}

.top-layout > .name {
  margin-top: 14px;
  font-size: 12px;
  line-height: 12px;
  color: #A2A2A2;
}

.top-layout > .state {
  margin-top: 14px;
  font-size: 14px;
  line-height: 14px;
  color: #CA9847;
}

.break-state-icon {
  position: absolute;
  right: 26px;
  bottom: -20px;
  width: 62px;
  height: 62px;
}

.center-layout {
  margin: auto;
  margin-top: 12px;
  padding: 24px 12px;
  width: calc(100% - 24px);
  background: #FFFFFF;
  border-radius: 5px;
}

.center-layout > * {
  font-size: 14px;
  line-height: 14px;
  color: #5E6265;
}

.center-layout > .time {
  margin-top: 14px;
  color: #999999;
}

.center-content {
  padding: 19px 13px;
  margin-top: 27px;
  background: #D8F8F5;
  border-radius: 6px;
}

.center-content-title {
  font-size: 15px;
  line-height: 15px;
  font-weight: bold;
  color: #333333;
}

.point-view {
  width: 9px;
  height: 9px;
  border: 1px solid #C0BEBE;
  border-radius: 50%;
}

.point-line {
  width: 1px;
  height: 22px;
  background: #C2C3C3;
}

.center-content-point {
  margin-top: 20px;
}

.point-times {
  margin-left: 12px;
  justify-content: space-between;
}

.point-times > * {
  font-size: 14px;
  line-height: 14px;
  color: #B0B9B7;
}

.break-reason-title {
  margin-top: 23px;
}

.break-reason {
  font-size: 15px;
  line-height: 15px;
  color: #333333;
  font-weight: bold;
  margin-top: 14px;
}

.bottom-layout {
  margin: auto;
  margin-top: 12px;
  padding: 17px 12px;
  width: calc(100% - 24px);
  background: #FFFFFF;
  border-radius: 6px;
}

.bottom-layout > * {
  font-size: 14px;
  line-height: 14px;
}

.bottom-time-title {
  color: #5E6265;
}

.bottom-time-text {
  color: #FF0000;
}

.look-history-layout {
  margin: auto;
  margin-top: 12px;
  padding: 13px 12px;
  width: calc(100% - 24px);
  background: #FFFFFF;
  border-radius: 6px;
  /* 文本样式 */
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
}

.action-layout {
  position: fixed;
  bottom: 0px;
  width: 100%;
  height: 47px;
  background: #FFFFFF;
  padding: 6px 36px;
}

.action-refuse {
  flex: 1;
  height: 37px;
  border: 1px solid #42B4AB;
  border-radius: 19px 0px 0px 19px;
  text-align: center;
  line-height: 37px;
  /* 文本样式 */
  font-size: 15px;
  font-family: PingFang SC;
  color: #333333;
}

.action-agree {
  flex: 1;
  height: 37px;
  background: #42B4AB;
  border-radius: 0px 19px 19px 0px;
  text-align: center;
  line-height: 37px;
  /* 文本样式 */
  font-size: 15px;
  font-family: PingFang SC;
  color: #FFFFFF;
}
</style>
